import FormLayout from "@/components/forms/formLayout"
import EasyFormProvider from "@/components/forms/EasyFormProvider"
// import { useAtomValue, useSetAtom } from "jotai/index"
// import { verifyAtom } from "@/pages/AccountPage/atoms/verify"
import { useAtom } from "jotai"
import { SetInitVerifyAtom, SetVerifyAtom, verifyAtom } from "@/pages/AccountPage/atoms/verify"
import { useNavigate } from "react-router-dom"
import ApiFetchers from "@/apis/api_fetchers"
import { toast } from "react-toastify"
import _ from "lodash"
import { useAuth } from "@/features/useAuth"

interface setPhone {
    phone: string
}
const sleep = (delay: number | undefined) => new Promise((resolve) => setTimeout(resolve, delay))

const Phone = () => {
    const navigator = useNavigate()
    // const verifyData = useAtomValue(verifyAtom)
    // const setVerifyData = useSetAtom(verifyAtom)
    const [verifyData] = useAtom(verifyAtom)
    const [, setVerifyData] = useAtom(SetVerifyAtom)
    const [, setInitVerifyData] = useAtom(SetInitVerifyAtom)
    const isPhoneForget =
        verifyData && verifyData?.field === "phone" && verifyData?.type === "forget"
    console.log(verifyData)
    const { sendVerifyCode } = useAuth()
    const onSubmit = async (values: setPhone) => {
        const res = await sendVerifyCode(values.phone)

        if (isPhoneForget) {
            await sleep(500)
            if (res) {
                // setVerifyData((prev) => ({
                //     ...prev,
                //     otpId: res?.data?.id,
                //     type: "forget",
                //     field: "phone",
                //     phone: values.phone,
                // }))
                setVerifyData({
                    ...verifyData,
                    otpId: res?.data?.id,
                    type: "forget",
                    field: "phone",
                    phone: values.phone,
                })
            }
            navigator("/forgetPassword/verify/verify")
        } else {
            // const res = await ApiFetchers.updatePhone(values)
            await sleep(500)
            const res = {
                success: true,
                data: {},
            }
            console.log(res, "res")
            if (res?.success) {
                setInitVerifyData()
                navigator("/s-account")
            } else {
                toast("Internal Server Error")
            }
        }
    }
    const throttledSubmit = _.throttle(onSubmit, 5000)
    const onBack = () => {
        console.log("onBack")
        setInitVerifyData()
        if (isPhoneForget) {
            navigator("/forgetPassword/")
        }
    }

    return (
        <FormLayout
            title={isPhoneForget ? "Enter Phone Number" : "Enter New phone number"}
            description={
                isPhoneForget
                    ? "Enter the phone number associated with your account."
                    : "Please enter your current mobile phone number"
            }
            backPath="/s-account"
            onBack={onBack}
        >
            <EasyFormProvider
                // @ts-ignore
                onSubmit={throttledSubmit}
                queryList={["phone", "submitButton"]}
            ></EasyFormProvider>
        </FormLayout>
    )
}

export default Phone
